<template>

  <div class="login-div">

    <div class="login-container">
      <!-- 左侧公司信息面板 -->
      <div class="left-panel">
        <div class="decoration circle1"></div>
        <div class="decoration circle2"></div>

        <div class="logo">
          <i class="el-icon-office-building logo-icon"></i>
          <div class="logo-text">企业管理系统</div>
        </div>

        <div class="slogan">高效协同，智能管理，助力企业数字化转型</div>

        <ul class="features">
          <li>
            <div class="feature-icon">
              <i class="el-icon-lock"></i>
            </div>
            <span>安全可靠的数据保护</span>
          </li>
          <li>
            <div class="feature-icon">
              <i class="el-icon-s-operation"></i>
            </div>
            <span>智能业务流程管理</span>
          </li>
          <li>
            <div class="feature-icon">
              <i class="el-icon-data-analysis"></i>
            </div>
            <span>数据分析与可视化</span>
          </li>
        </ul>
      </div>

      <!-- 右侧登录面板 -->
      <div class="right-panel">
        <div class="login-header">
          <h2>欢迎登录</h2>
          <p>请输入您的账号和密码进行登录</p>
        </div>

        <el-form :model="loginForm" :rules="rules" ref="loginForm">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="用户名/邮箱/手机号"
              prefix-icon="el-icon-user"
              size="medium">
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              prefix-icon="el-icon-lock"
              size="medium"
              @keyup.enter.native="submitForm('loginForm')">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="loginForm.remember" style="float: left">记住密码</el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%"
              :loading="loading"
              @click="submitForm('loginForm')">
              {{ loading ? '登录中...' : '登录' }}
            </el-button>
          </el-form-item>
        </el-form>

        <div class="action-links">
          <a class="action-link" @click="forgotPassword">忘记密码?</a>
          <a class="action-link" @click="register">注册新账号</a>
        </div>

        <div class="social-login">
          <div class="social-icon wechat">
            <i class="fab fa-weixin"></i>
          </div>
          <div class="social-icon weibo">
            <i class="fab fa-weibo"></i>
          </div>
          <div class="social-icon qq">
            <i class="fab fa-qq"></i>
          </div>
        </div>

        <div class="copyright">
          © 2023 企业管理系统 | 隐私政策 | 服务条款
        </div>
      </div>
    </div>
  </div>

</template>

<script>


import Register from "./Register";
export default {
  name: "login",
  components: {Register},
  mounted() {
    // this._verificationCode();
  },
  data() {
    return {
      msg: '',
      imageUrl: 'static/mes.png',
      url: '',
      vCode: '',
      count: '',
      loginForm: {
        username: localStorage.getItem('RmbUsername')? localStorage.getItem('RmbUsername') : '',
        password: '',
        remember: false
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
        ]
      },
      loading: false,
      timer: null,
      content: '倒计时',  // 按钮里显示的内容
    }
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          // 模拟登录请求
          this._login();

        } else {
          this.$message.error('请正确填写表单');
          return false;
        }
      });
    },
    forgotPassword() {
      this.$message.info('忘记密码功能即将开放');
    },
    register() {
      this.$message.info('注册功能即将开放');
    },

    _login() {
      let userData = this.loginForm;
      this.$http.post("/api/base/auth/login" , userData).then(result => {
        let returnData = result.data;
        console.log('------------result---',result);
        this.loading = false;
        if (0 === returnData.code) {

          console.log('result', result.data)
          const token = returnData.data;
          if (undefined !== token) {
            localStorage.setItem('JWT_TOKEN', token)
          }
          if (userData.remember) {
            localStorage.setItem('RmbUsername', userData.username);
            // localStorage.setItem('RmbPassword', userData.username);
          }


          this._getUserInfo(returnData.data)
        } else {
          this.msg = returnData.message;
          this.countDown()
        }


      }).catch(err => {


        console.log(err);
      })
    },
    _register(){
      this.$refs.registerRef._open();
    },

    _getUserInfo(path){
      this.$http.post("/api/base/auth/userInfo").then(res=>{
        let returnData=res.data;
        let userInfo=returnData.data;
        let action='/api/base/sys_user/upload?businessId='+userInfo.id;

        localStorage.setItem('action', action)

        localStorage.setItem('userInfo', userInfo)
        localStorage.setItem('userId', userInfo.userId)
        localStorage.setItem('userName', userInfo.userName)
        localStorage.setItem('realName', userInfo.realName)

        let businessId=userInfo.id;
        // this.$http.get('/sys_user/preview?id='+businessId).then(res=>{
        //   let headerImageUrl = res.data.data;
        //   localStorage.setItem('headerImageUrl', headerImageUrl)
        //
        // }).catch(err=>{
        //   console.log(err)
        // })
        this.$router.push({path: path, query: {}});
      }).catch(err=>{

        console.log(err)
      })
    },

    _verificationCode() {
      this.$http.get("/login/createCode").then(response => {
        this.countDown()
        console.log((response.data.data.url))
        console.log(decodeURI(response.data.data.url))
        this.url = 'data:image/png;base64,' + decodeURI(response.data.data.url)
        this.vCode = response.data.data.code
        console.log(this.url)

      }).catch(err => {


        console.log(err);
      })
    },

    countDown() {
      clearInterval(this.timer);
      this.timer=null
      const timerFor=1000
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 1 && this.count <= TIME_COUNT) {
            this.count--;
            this.content = '验证码失效时间 ' + this.count + ' s'
          } else {
            this.content = '验证码已失效请重新获取'
            clearInterval(this.timer);
            this.timer = null;

          }
        }, timerFor)
      }

    }

  }

}


</script>

<style scoped>

.div-inline{

}

.login-div {
  clear: both;
  width: 800px;
  height: 500px;
  margin: 100px auto;
  border: 1px solid #DCDFE6;
  border-radius: 5px;
  box-shadow: 0 0 25px white;
}
.login {
  width:50%; float:left;
  margin-top: 2%;
  height: 100%;
  box-shadow: 0 0 25px white;
  border-radius: 1px;
}
.login-left {
  width:50%; float:left;
  height: 100%;
  box-shadow: 0 0 25px white;
  border-radius: 1px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  background: #f5f7fa;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
}

.login-container {
  width: 100%;
  max-width: 1000px;
  height: 600px;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.left-panel {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.logo {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 36px;
  margin-right: 15px;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
}

.slogan {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.features {
  list-style: none;
  margin-top: 30px;
}

.features li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.feature-icon {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.decoration {
  position: absolute;
  opacity: 0.1;
}

.decoration.circle1 {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: white;
  top: -100px;
  right: -100px;
}

.decoration.circle2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: white;
  bottom: -50px;
  left: -50px;
}

.right-panel {
  width: 400px;
  background: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h2 {
  font-weight: 500;
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.login-header p {
  color: #888;
  font-size: 14px;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-input__inner {
  border-radius: 4px;
  height: 44px;
  line-height: 44px;
}

.el-button {
  border-radius: 4px;
  font-weight: 500;
  height: 44px;
  font-size: 16px;
}

.action-links {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 14px;
}

.action-link {
  color: #667eea;
  cursor: pointer;
  transition: color 0.3s;
}

.action-link:hover {
  color: #764ba2;
  text-decoration: underline;
}

.social-login {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 15px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.social-icon:hover {
  transform: scale(1.1);
}

.wechat {
  background: #2aae67;
}

.weibo {
  background: #e71f19;
}

.qq {
  background: #12b7f5;
}

.copyright {
  text-align: center;
  margin-top: 30px;
  font-size: 12px;
  color: #999;
}

@media (max-width: 900px) {
  .login-container {
    flex-direction: column;
    height: auto;
    max-width: 400px;
  }

  .left-panel {
    display: none;
  }

  .right-panel {
    width: 100%;
  }
}
</style>
